<template>
  <!-- 公用的nav-bar组件 -->
  <van-nav-bar
    left-arrow
    @click-left="onClickLeft"
    :title="title"
    :right-text="rightText"
    @click-right="onClickRight"
  ></van-nav-bar>
</template>

<script setup lang="ts">
import router from '@/router'

// 1.点击返回按钮,返回上一个页面(历史记录)
// 2.props属性,title设置标题,rightText 设置标题
// 3.点击右侧的文字按钮,要做的事情通过父组件来通知

const props = defineProps<{
  title?: string
  rightText?: string
  back?: () => void
}>()

const onClickLeft = () => {
  // 如果传了back回调函数就执行我的函数
  if (props.back) {
    return props.back()
  }
  // 实现返回
  //如果当前网站的上一个历史记录,可以执行返回
  if (history.state?.back) {
    router.back()
  } else {
    // 没有记录? 跳转到首页
    // router.push('/home')
  }
}

const emit = defineEmits<{
  (e: 'click-right'): void
}>()
const onClickRight = () => {
  // 点击右侧文字按钮
  emit('click-right')
}
</script>

<style lang="scss" scoped></style>
